<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row :gutter="20">
          <!-- 头部搜索框 -->
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="formData"
          >
            <el-col :span="5.1" style="margin-left: 40px">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="请输入关键字"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="状态">
                <el-select v-model="form.state" placeholder="请选择">
                  <el-option label="已开启" :value="1"></el-option>
                  <el-option label="已禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="cleanFn">清除</el-button>
                <el-button type="primary" @click="searchFn">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="float: right">
              <el-form-item style="float: right">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="showAdd = true"
                  @close-dialog="showAdd = false"
                  >新增技巧</el-button
                >
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-alert
          :title="`数据一共 ${total} 条`"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 表格区域 -->
        <el-table
          :data="articleList"
          style="width: 100%; margin-top: 20px"
          :header-cell-style="tableStyle"
        >
          <el-table-column label="序号" width="80" type="index" align="center">
          </el-table-column>
          <el-table-column label="文章标题" width="420">
            <template v-slot="{ row }">
              {{ row.title }}&nbsp;
              <a
                href="javascript:;"
                class="el-icon-film"
                v-if="row.videoURL"
                @click="videoFn(row.videoURL)"
                style="color: blue; font-size: 18px"
              ></a>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" width="130">
          </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column label="录入时间" width="220">
            <template v-slot="{ row }">
              {{ parseTime(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="95">
            <template v-slot="{ row }">
              {{ row.state === 1 ? "已开启" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="text"
                size="small"
                @click="previewFn(row.id, row.username)"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="stateFn(row.id, row.state)"
                >{{ row.state ? "禁用" : "启用" }}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 1"
                @click="editFn(row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 1"
                @click="delFn(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
          :page-sizes="[2, 3, 5, 10]"
          :page-size="params.pagesize"
          background
          layout="  prev, pager, next,sizes, jumper"
          :total="total"
          @current-change="pageFn"
          @size-change="pagesizeFn"
          style="float: right; margin: 20px 0"
        >
        </el-pagination>
      </el-card>
      <!-- 预览文章弹框 -->
      <articles-preview
        :dialog-visible="showPreview"
        :cur-id="curId"
        :user-name="articleList.username"
        @close-dialog="showPreview = false"
      ></articles-preview>
      <!-- 添加文章对话框 -->
      <articles-add
        :dialog-visible="showAdd"
        @close-dialog="showAdd = false"
        @update-article="getArticleFn"
        ref="add"
      ></articles-add>
      <!-- 视频弹窗 -->
      <el-dialog
        title="视频播放"
        :visible="showVideo"
        close-on-press-escape
        width="800px"
        @close="showVideo = false"
      >
        <video :src="videoUrl" v-if="showVideo" width="760px" autoplay></video>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove, detail } from '@/api/hmmm/articles'
import ArticlesPreview from '../components/articles-preview.vue'
import { parseTime } from '@/utils/index'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  name: 'Article',
  components: {
    ArticlesPreview,
    ArticlesAdd
  },
  data () {
    return {
      form: { // 头部搜索表单
        keyword: '',
        state: ''
      },
      articleList: [], // 文章列表
      total: 0, // 文章总页数
      params: { // 分页功能
        page: 1,
        pagesize: 10
      },
      showPreview: false, // 预览文章显示与隐藏
      curId: 0, // 传子组件id
      showAdd: false, // 添加文章弹窗
      showVideo: false,
      videoUrl: ''
    }
  },
  mounted () {
    this.getArticleFn()
  },
  methods: {
    // 获取文章列表
    async getArticleFn () {
      const res = await list(this.params)
      const { items, counts } = res.data
      this.articleList = items
      this.total = counts
    },
    // 表格头部样式
    tableStyle () {
      return 'background:#fafafa; border-bottom: 3px solid #e9e9e9;'
    },
    // 清除按钮
    cleanFn () {
      this.form = { // 头部搜索表单
        keyword: '',
        state: ''
      }
    },
    // 搜素按钮 渲染表单
    async searchFn () {
      if (this.form.keyword !== '' || this.form.state !== '') {
        if (this.form.state === '') {
          this.form = {
            keyword: this.form.keyword
          }
        }
        const res = await list({ ...this.params, ...this.form })
        const { items, counts } = res.data
        this.articleList = items
        this.total = counts
      } else {
        this.getArticleFn()
      }
    },
    // 改变页数
    pageFn (page) {
      this.params.page = page
      this.getArticleFn()
    },
    // 改变每页显示数量
    pagesizeFn (size) {
      this.params.pagesize = size
      this.getArticleFn()
    },
    // 预览文章
    previewFn (id, name) {
      this.showPreview = true
      this.curId = id
      this.username = name
    },
    parseTime,
    // 改变状态
    async stateFn (id, state) {
      if (state) {
        state = 0
      } else {
        state = 1
      }
      await changeState({ id, state })
      this.getArticleFn()
      this.$message.success('操作成功')
    },
    // 删除文章
    delFn (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功了')
        this.getArticleFn()
      }).catch(() => {

      })
    },
    // 修改文章
    async editFn (id) {
      this.showAdd = true
      const res = await detail({ id })
      console.log(res)
      this.$refs.add.form = res.data
    },
    // 视频播放弹窗
    videoFn (url) {
      this.showVideo = true
      this.videoUrl = url
    }
  }
}
</script>

<style scoped>
</style>
